<template>
  <div
    class="rightWring absolute flex size16 text-center bold  color-primary btn-position"
    :style="btnPosition"
  >
    <div
      class=" yugaobox flex align-center justify-center hover-pointer pointer"
      :class="
        item.stateName == '超时'
          ? 'inset-shadow-danger'
          : 'inset-shadow-warning'
      "
      :key="index"
      v-for="(item, index) in csData"
      @click="getAlarmList(index)"
    >
      <div>
        {{ item.stateName }}
        <div
          class="big-number "
          :class="item.stateName == '超时' ? 'color-danger' : 'color-warning'"
        >
          {{ item.total }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    btnPosition: {
      type: String,
      default: "right: 20px;bottom: 45px;"
    },
    csData: {
      type: Array,
      default: () => {
        return [
          {
            stateName: "预警",
            total: 0
          },
          {
            stateName: "超时",
            total: 0
          }
        ];
      }
    }
  },
  methods: {
    getAlarmList(index) {
      this.$emit("getAlarmList", index);
    }
  }
};
</script>
<style lang="scss">
.van-image-preview__overlay {
  z-index: 2499 !important;
}
.van-image-preview {
  z-index: 2500 !important;
}
.yugaobox {
  width: 60px;
  height: 60px;
  margin-left: 20px;
  border-radius: 50%;
}
.moke-box {
  .moke-text {
    transition: all ease 0.8s;
    opacity: 0;
    top: 0;
  }
  &:hover {
    .moke-text {
      opacity: 1;
      top: 0;
    }
  }
}
.hidden {
  display: none;
}
.btn-position {
  //   right: 20px;
  //   bottom: 45px;
}
</style>
